<template>
  <div style="background-color: rgba(255, 255, 255, 1); height: 100%">

    <div class="nav">
      <h3 :class="{ active: selectType === 1 }" @click="selectType = 1">
        维修详情
      </h3>
      <h3 :class="{ active: selectType === 2 }"
          @click="selectType = 2"
          v-if="bloc.num !== 0"
      >
        维修评价
      </h3>
    </div>
    <div class="form-page" v-if="selectType === 1">
    <div style="height: auto">
      <Card :bordered="false" :dis-hover="true" :padding="5" >
        <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 维修单信息
        </b>

        <div>
          <b class="label-left">
            售后单号:
          </b>
          <div class="label-right-text">
            <p>{{bloc.model.PostSaleNum}}</p>
          </div>
        </div>
        <div>
          <b class="label-left">
            设备序列号:
          </b>
          <div class="label-left1"
          >
            {{bloc.model.SerialNum}}
          </div>
          <b class="label-left">
            顾客姓名:
          </b>
          <div class="label-right">
            {{bloc.model.ConsigneeName}}
          </div>
        </div>
        <div>
          <b class="label-left">
            售后经销商:
          </b>
          <div class="label-left1">
            {{bloc.model.DealerName}}
          </div>
          <b class="label-left">
            维修员:
          </b>
          <div class="label-right">
            {{bloc.model.MaintenanceName}}
          </div>
        </div>
        <div>
          <b class="label-left">
            保修期内:
          </b>
          <div class='label-left1'>
            {{bloc.model.IsUnderWarranty==='0'?'否':'是'}}
          </div>
          <b class="label-left">
            维修时间:
          </b>
          <div class="label-right">
            {{bloc.model.MaintenanceTime}}
          </div>
        </div>
        <div>
          <b class="label-left">
            配件费(元):
          </b>
          <div class='label-left1'>
            {{bloc.model.PartsCost}}
          </div>
          <b class="label-left">
            人工费(元):
          </b>
          <div class="label-right">
            {{bloc.model.LaborCost}}
          </div>
        </div>
        <div>
          <b class="label-left">
            备注:
          </b>
          <div class="label-right-text">
            <p>{{bloc.model.Remark}}</p>
          </div>
        </div>
      </Card>
    </div>
    <div style="height: auto">
      <Card :bordered="false" :dis-hover="true" :padding="5" >
      <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 配件使用详情
      </b>

      <div class="list-page">
        <Row>
          <Table
            border
            :loading="bloc.loading"
            :columns="columns1"
            highlight-row
            :data="bloc.paged1.items"
          >
            <slot name="footer" slot="footer">
              <Page
                show-elevator
                show-total
                show-sizer
                :total="bloc.paged1.itemCount"
                :current="bloc.paged1.pageIndex"
                :page-size="bloc.paged1.pageSize"
                :page-size-opts="[15, 30, 50, 100]"
                @on-change="(val) => bloc.load(val, bloc.paged1.pageSize)"
                @on-page-size-change="(val) => bloc.load(bloc.paged1.pageIndex, val)"
              />
            </slot>
          </Table>
        </Row>
      </div>
    </Card>
    </div>
    <div style="margin-top: auto" v-if="bloc.hasFormInfo !== 1">
      <Card :bordered="false" :dis-hover="true" :padding="10">
      <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 维修图片视频
      </b>
      <div style="text-align: left">
        <div class="demo-upload-list" v-for="(item, index) in fileList" :key="ind(item,index)" style="left: 0">
          <template v-if="item.status1 === 'finished'">
            <div>{{item.name}}</div>
            <img :src="item.imageurl" :alt="item.name">

            <div class="demo-upload-list-cover" style="padding-top: 137px">
              <Icon type="ios-eye-outline" @click.native="handleView(item.imageurl)"></Icon>
            </div>
          </template>
          <Upload :action="'null'">
            <Modal title="View Image" v-model="visible" :width="wid">
              <img :src="imgUrl" v-if="visible">
            </Modal>
            <Modal title="View Image" v-model="visible1" :width="wid">
              <img :src="imgUrl" v-if="visible1" :width ="wid1">
            </Modal>

          </Upload>
        </div>
        <div class="demo-upload-list" v-for="(item, index) in videoList" :key="ind(item,index)" style="left: 0">
          <template v-if="item.status1 === 'finished'">
            <div>{{item.name}}</div>
            <video
              height="300"
              width="400"
              controls
              :src="item.videourl"></video>
          </template>
        </div>
      </div>
    </Card>
    </div>
  </div>
    <div class="form-page" v-if="selectType === 2">
      <div style="height: auto">
        <Card :bordered="false" :dis-hover="true" :padding="5" >
          <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 维修评价
          </b>
          <div>
            <b class="label-left">
              总体星级:
            </b>
            <div class="label-left1"
                 style="color: #F56C6C;font-size: 25px;font-weight: normal"
            >
              {{bloc.shuchu(bloc.model2.Star)}}
            </div>
            <b class="label-left">
              专业星级:
            </b>
            <div class="label-right"
                 style="color: #F56C6C;font-size: 25px;font-weight: normal"
            >
              {{bloc.shuchu(bloc.model2.Speciality)}}
            </div>
          </div>
          <div>
            <b class="label-left">
              态度星级:
            </b>
            <div class="label-left1"
                 style="color: #F56C6C;font-size: 25px;font-weight: normal"
            >
              {{bloc.shuchu(bloc.model2.Attitude)}}
            </div>
            <b class="label-left">
              形象星级:
            </b>
            <div class="label-right"
                 style="color: #F56C6C;font-size: 25px;font-weight: normal"
            >
              {{bloc.shuchu(bloc.model2.Clothing)}}
            </div>
          </div>
          <div>
            <b class="label-left">
              耗时星级:
            </b>
            <div class="label-left1"
                 style="color: #F56C6C;font-size: 25px;font-weight: normal"
            >
              {{bloc.shuchu(bloc.model2.Times)}}
            </div>
            <b class="label-left">
              评价时间:
            </b>
            <div class="label-right">
              {{bloc.model2.SubmitTime}}
            </div>
          </div>
          <div>
            <b class="label-left2">
              评价:
            </b>
            <div class="label-right-text2">
              <p>{{bloc.model2.Comment}}</p>
            </div>
          </div>
        </Card>
      </div>
      <div style="margin-top: auto" v-if="bloc.hasFormInfo2 !== 1">
        <Card :bordered="false" :dis-hover="true" :padding="10">
          <b slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 评价图片
          </b>
          <div style="text-align: left">
            <div class="demo-upload-list" v-for="(item, index) in fileList2" :key="ind(item,index)" style="left: 0">
              <template v-if="item.status1 === 'finished'">
                <img :src="item.imageurl">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click.native="handleView(item.imageurl)"></Icon>
                </div>
              </template>
              <Upload :action="'null'">
                <Modal title="View Image" v-model="visible" :width="wid">
                  <img :src="imgUrl" v-if="visible">
                </Modal>
                <Modal title="View Image" v-model="visible1" :width="wid">
                  <img :src="imgUrl" v-if="visible1" :width ="wid1">
                </Modal>

              </Upload>
            </div>
          </div>
        </Card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {store} from '@/store/Store';
    import {Route} from 'vue-router';
    import {MaintainBloc} from './DetailBloc';
    import {deepAssign} from '@/base/util/Objects';
    import { RecordDetailBlocBloc } from './RecordDetailBloc';
    const columns1 = (bloc: RecordDetailBlocBloc) => [
        {
            title: '配件名称',
            key: 'PartName',
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '单价(元)',
            key: 'UnitPrice',
            align: 'left',
            minWidth: 220,
            tooltip: true
        },
        {
            title: '数量',
            key: 'Quantity',
            align: 'left',
            minWidth: 100,
            tooltip: true
        }
    ];

    @Component({
    })

    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next(vm => {
                vm.bloc.i = vm.idx;
                if (vm.bloc.i) {
                    vm.bloc.load(vm.bloc.i);
                } else {
                    vm.$Message.error('操作错误');
                }
            });
        }
        get idx() {
            return Number(this.$route.params.id);
        }

        bloc = new RecordDetailBlocBloc();
        columns1 = columns1(this.bloc);
        selectType: any = 1;
        imgUrl = '';
        wid = 1000;
        wid1= 2000;
        visible = false;
        visible1 = false;

        get fileList() {
            return this.bloc.fileList.map(x => {
                return {'name': x[0], 'imageurl': x[1], 'status1': 'finished'};
            });
        }
        get fileList2() {
            return this.bloc.fileList2.map(x => {
                return {'name': 'name', 'imageurl': x, 'status1': 'finished'};
            });
        }
        get videoList() {
            return this.bloc.videoList.map(x => {
                return {'name': x[0], 'videourl': x[1], 'status1': 'finished'};
            });
        }
        handleView(url) {
            let iii = new Image();
            iii.src = url;
            this.wid = iii.width + 32;
            if (this.wid > 1300) {
                this.wid = 1300;
                this.wid1 = 1300 - 32;
                this.imgUrl = url;
                this.visible1 = true;
            } else {
                this.imgUrl = url;
                this.visible = true;
            }

        }

        ind(item, index) {
            return index;
        }
    }
</script>

<style lang="less" scoped>
  /deep/ .ivu-form-item-content {
    display: flex !important;
    justify-content: start !important;
    align-items: center !important;
  }
  /deep/ .ivu-form-item-label {
    padding-top: 0;
  }
  .form-page .ivu-card {
    height: 50%;
  }
  .label-left{
    width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
    line-height: 40px;
  }
  .label-left1{
    width: 40%;float: left; border: 1px #ECEFF4 solid;
    line-height: 40px;text-indent: 4em;
    text-align: left;
  }
  .label-right{
    width: 40%;float: right;border: 1px #ECEFF4 solid;line-height: 40px;text-indent: 4em;
    text-align: left;
  }
  /*.label-left-text{*/
  /*  width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;*/
  /*  line-height: 90px;*/
  /*}*/
  .label-right-text{
    width: 90%;float: right;border: 1px #ECEFF4 solid;height: 40px;
    text-align: left;overflow:auto;display: flex;justify-content: left;
    align-items: center;text-indent: 7em;
  }
  .label-left2{
    width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
    line-height: 90px;
  }
  .label-right-text2{
    width: 90%;float: right;border: 1px #ECEFF4 solid;height: 90px;
    text-align: left;overflow:auto;display: flex;justify-content: left;
    align-items: center;
  }
  .label-right-text2 p{
    text-indent: 4em;
    text-align: left;
    display: inline-block;
  }
  .label-right-text p{
    text-indent: 4em;
    text-align: left;
    display: inline-block;
  }

  .demo-upload-list{
    height:300px;
    width:350px
  }
  .nav {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    display: flex;
    justify-content: flex-start;

    h3 {
      padding: 0 20px;
      cursor: pointer;
    }

    .active {
      border-bottom: 1px solid #559df9;
      color: #559df9;
    }
  }
</style>
